fix(navbar): ensure all primary actions are accessible on small screens by Hardik301002 · Pull Request #38132 · RocketChat/Rocket.Chat

Hardik301002 · 2026-01-10T06:12:39Z

What

Fixes missing primary navigation actions when the top navbar collapses on small screen sizes

Why

Important actions were inaccessible on mobile and tablet viewports due to conditional rendering

How

Updated mobile navbar logic to ensure all primary controls are included in the collapsed menu instead of being hidden

Steps to test

Resize viewport to ~700–800px or mobile width
Open the navbar overflow (stack) menu
Verify all navigation actions are accessible

Summary by CodeRabbit

Bug Fixes

Fixed navbar to ensure VoIP and Omnichannel controls are now consistently displayed across all device layouts.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

changeset-bot · 2026-01-10T06:12:44Z

⚠️ No Changeset found

Latest commit: 0228686

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

dionisio-bot · 2026-01-10T06:12:44Z

Looks like this PR is not ready to merge, because of the following issues:

This PR is missing the 'stat: QA assured' label
This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

CLAassistant · 2026-01-10T06:12:48Z

All committers have signed the CLA.

coderabbitai · 2026-01-10T06:13:05Z

Walkthrough

The PR removes mobile-specific rendering logic from NavBarControlsSection, making Voip and Omnichannel component groups render unconditionally on all layouts when their respective conditions are met, rather than only on specific device sizes.

Changes

Cohort / File(s)	Change Summary
NavBar Controls Rendering `apps/meteor/client/navbar/NavBarControls/NavBarControlsSection.tsx`	Removed mobile-specific early return; now always renders NavBarSection with unconditional Voip and Omnichannel group inclusion when `callAction` and `showOmnichannel` conditions are met

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

chore: bump fuselage packages #37420 — Modifies the same NavBar component hierarchy (NavBarControlsSection, NavBarOmnichannelGroup, NavBarVoipGroup) with related rendering and feature-gating logic changes.

Suggested reviewers

tassoevan

Poem

🐰 The navbar hops without a care,
Mobile walls now disappear—
Voip and Omnichannel shine,
On every layout, they align!
Controls that dance on every screen,
The smoothest navbar ever seen! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately reflects the main change: ensuring primary navigation actions are accessible on small screens by fixing the conditional rendering logic in the navbar component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

cubic-dev-ai

No issues found across 1 file

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/meteor/client/navbar/NavBarControls/NavBarControlsSection.tsx (1)

20-44: Consider refactoring to eliminate code duplication.

The mobile and non-mobile branches duplicate the rendering of NavBarVoipGroup, NavBarOmnichannelGroup, and the workspace/user preferences group. The only difference is the conditional NavBarControlsWithData on mobile.

♻️ Proposed refactor to reduce duplication

-	if (isMobile) {
-	return (
-		<NavBarSection>
-			{callAction && <NavBarVoipGroup />}
-			{showOmnichannel && <NavBarOmnichannelGroup />}
-			{(showOmnichannel || callAction) && <NavBarControlsWithData />}
-			<NavBarGroup aria-label={t('Workspace_and_user_preferences')}>
-				<NavBarItemAdministrationMenu />
-				{user ? <UserMenu user={user} /> : <NavBarItemLoginPage />}
-			</NavBarGroup>
-		</NavBarSection>
-	);
-}
-
-
-	return (
+	return (
 		<NavBarSection>
 			{callAction && <NavBarVoipGroup />}
 			{showOmnichannel && <NavBarOmnichannelGroup />}
+			{isMobile && (showOmnichannel || callAction) && <NavBarControlsWithData />}
 			<NavBarGroup aria-label={t('Workspace_and_user_preferences')}>
 				<NavBarItemAdministrationMenu />
 				{user ? <UserMenu user={user} /> : <NavBarItemLoginPage />}
 			</NavBarGroup>
 		</NavBarSection>
 	);

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 05c415b and 0228686.

📒 Files selected for processing (1)

apps/meteor/client/navbar/NavBarControls/NavBarControlsSection.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

apps/meteor/client/navbar/NavBarControls/NavBarControlsSection.tsx

🔇 Additional comments (1)

apps/meteor/client/navbar/NavBarControls/NavBarControlsSection.tsx (1)

20-32: AI summary incorrectly describes the change.

The AI summary states "Removed mobile-specific early return," but the code still contains an if (isMobile) block. The actual change adds Voip and Omnichannel groups to the mobile view, not removes the conditional rendering.

Fix missing navigation items in collapsed header view

0228686

Hardik301002 requested a review from a team as a code owner January 10, 2026 06:12

ggazzo added the Invalid PR Title label Jan 10, 2026

cubic-dev-ai bot reviewed Jan 10, 2026

View reviewed changes

coderabbitai bot reviewed Jan 10, 2026

View reviewed changes

Hardik301002 mentioned this pull request Jan 10, 2026

Responsive header hides primary navigation actions on smaller screen widths #38116

Open

Hardik301002 changed the title ~~Fix missing navigation items in collapsed header view~~ fix(navbar): ensure all primary actions are accessible on small screens Jan 10, 2026

ggazzo removed the Invalid PR Title label Jan 10, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(navbar): ensure all primary actions are accessible on small screens#38132

fix(navbar): ensure all primary actions are accessible on small screens#38132
Hardik301002 wants to merge 1 commit intoRocketChat:developfrom
Hardik301002:fix-responsive-top-nav

Hardik301002 commented Jan 10, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Jan 10, 2026

Uh oh!

dionisio-bot bot commented Jan 10, 2026 •

edited

Loading

Uh oh!

CLAassistant commented Jan 10, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 10, 2026 •

edited

Loading

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Hardik301002 commented Jan 10, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Bug Fixes

Uh oh!

changeset-bot bot commented Jan 10, 2026

⚠️ No Changeset found

Uh oh!

dionisio-bot bot commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CLAassistant commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Hardik301002 commented Jan 10, 2026 •

edited by coderabbitai bot

Loading

dionisio-bot bot commented Jan 10, 2026 •

edited

Loading

CLAassistant commented Jan 10, 2026 •

edited

Loading

coderabbitai bot commented Jan 10, 2026 •

edited

Loading